<template lang="">
  <div>
    <div
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    id: {
      type: String,
      default: ""
    },
    originColor: {
      type: String,
      default: ""
    },
    contrastColor: {
      type: String,
      default: ""
    },
    pieData: {
      type: Object,
      default: () => {}
    },
    anotherValue: {
      type: Number,
      default: 0
    },
    anotherTitle: {
      type: String,
      default: ""
    },
    halfValue: {
      type: Number,
      default: 0
    },
    halfTitle: {
      type: String,
      default: ""
    }
  },

  watch: {
    anotherValue() {
      this.$nextTick(() => {
        this.init();
      });
    }
  },

  computed: {
    // 格式化秒为分钟
    formatTime() {
      return (value) => {
        const minutes = value / 60;
        return minutes.toFixed(1);
      };
    }
  },

  methods: {
    init() {
      const { anotherValue, anotherTitle, halfValue, halfTitle } = this.$props;
      const ComOption = {
        title: {
          text: this.$props.title,
          top: "48%",
          left: "43%",
          textStyle: {
            color: "#00FF9E",
            fontWeight: 500,
            fontSize: 18
          }
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["29%", "38%"],
            avoidLabelOverlap: false,
            label: {
              formatter: (a) => {
                return `${a.name}\n \n${a.percent}% | ${this.formatTime(a.value)} 分钟`;
              }
            },
            data: [
              {
                value: halfValue,
                name: halfTitle,
                itemStyle: {
                  color: this.$props.originColor
                },
                label: {
                  color: "#fff"
                }
              },
              {
                value: anotherValue,
                name: anotherTitle,
                itemStyle: {
                  color: this.$props.contrastColor
                },
                label: {
                  color: "#fff"
                }
              }
            ]
          }
        ]
      };
      const dom = document.getElementById(this.$props.id);
      const pieEchart = echarts.init(dom);
      pieEchart.setOption(ComOption);
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
<style lang=""></style>
